<template>
	<div class="panel" :class="yangshi">
		<div class="panel-header">
			<slot name="header">{{ header }}</slot>
		</div>
		<div class="panel-body"><slot></slot></div>
	</div>
</template>

<script>
export default {
	name: 'mianban',
	props: {
		header: {},
		bodyStyle: {},
		headerStyle: {},
		yangshi: {
			type: String,
			default: 'panel-default'
		}
	}
};
</script>

<style>
.panel {
	border-radius: 5px;
	background-color: #fff;
	border: solid 1px transparent;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.panel-header {
	border-bottom: solid 1px transparent;
	padding: 8px 15px;
	font-size: 14px;
	font-weight: 700;
} /*面板标题*/
.panel-body {
	padding: 15px;
} /*面板内容*/
.panel-footer {
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
	padding: 5px 20px;
} /*面板页脚*/
/*默认面板*/
.panel-default {
	border-color: #ddd;
}
.panel-default > .panel-header {
	border-color: #ddd;
	background-color: #f5f5f5;
	color: #444;
}

/*主要面板*/
.panel-primary {
	border-color: #5a98de;
}
.panel-primary > .panel-header {
	border-color: #5a98de;
	background-color: #5a98de;
	color: #fff;
}

/*次要面板*/
.panel-secondary {
	border-color: #3bb4f2;
}
.panel-secondary > .panel-header {
	border-color: #3bb4f2;
	background-color: #3bb4f2;
	color: #fff;
}

/*成功面板*/
.panel-success {
	border-color: #5eb95e;
}
.panel-success > .panel-header {
	border-color: #5eb95e;
	background-color: #5eb95e;
	color: #fff;
}

/*警告面板*/
.panel-warning {
	border-color: #f37b1d;
}
.panel-warning > .panel-header {
	border-color: #f37b1d;
	background-color: #f37b1d;
	color: #fff;
}

/*危险面板*/
.panel-danger {
	border-color: #dd514c;
}
.panel-danger > .panel-header {
	border-color: #dd514c;
	background-color: #dd514c;
	color: #fff;
}

/*粉紫色面板*/
.panel-fenzi {
	border-color: #b16eb0;
}
.panel-fenzi > .panel-header {
	border-color: #b16eb0;
	background-color: #b16eb0;
	color: #fff;
}

/*深绿色面板*/
.panel-shenlv {
	border-color: #258181;
}
.panel-shenlv > .panel-header {
	border-color: #258181;
	background-color: #258181;
	color: #fff;
}

/*紫色面板*/
.panel-zise {
	border-color: #800080;
}
.panel-zise > .panel-header {
	border-color: #800080;
	background-color: #800080;
	color: #fff;
}

/*红色面板*/
.panel-hongse {
	border-color: #ff0000;
}
.panel-hongse > .panel-header {
	border-color: #ff0000;
	background-color: #ff0000;
	color: #fff;
}

/*金黄色面板*/
.panel-jinhuang {
	border-color: #a6a600;
}
.panel-jinhuang > .panel-header {
	border-color: #a6a600;
	background-color: #a6a600;
	color: #fff;
}

/*棕色面板*/
.panel-zongse {
	border-color: #945b3a;
}
.panel-zongse > .panel-header {
	border-color: #945b3a;
	background-color: #945b3a;
	color: #fff;
}

/*深青色面板*/
.panel-shenhongse {
	border-color: #8b1e1e;
}
.panel-shenhongse > .panel-header {
	border-color: #8b1e1e;
	background-color: #8b1e1e;
	color: #fff;
}

/*蓝色面板*/
.panel-lanse {
	border-color: #0000ff;
}
.panel-lanse > .panel-header {
	border-color: #0000ff;
	background-color: #0000ff;
	color: #fff;
}

/*靛青色面板*/
.panel-dianqingse {
	border-color: #4b0082;
}
.panel-dianqingse > .panel-header {
	border-color: #4b0082;
	background-color: #4b0082;
	color: #fff;
}

/*深粉紅面板*/
.panel-shenfenhong {
	border-color: #cd1076;
}
.panel-shenfenhong > .panel-header {
	border-color: #cd1076;
	background-color: #cd1076;
	color: #fff;
}
</style>
